<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>列表渲染</title>
</head>
<body>
    <!--
        1:列表显示
        数组：v-for/ index
        对象：v-for/ key
        2:列表的更新显示
        删除item
        替换item
    -->
    <div id="demo">
        <h1>测试：v-for遍历数组</h1><br>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{index}}---{{p.name}}---{{p.age}}
                ---<button @click="deleteP">删除</button>
                ---<button @click="updateP(index, {name:'Cat',age: 20})">更新</button>
            </li>
        </ul>
        <h1>测试：v-for遍历对象</h1>
        <ul>
            <li v-for="(value,key) in persons[1]" :key="key">
                {{key}}---{{value}}
            </li>
        </ul>
    </div>
    <!--vue本身只是监视了persons的改变，没有监视数组内部的改变
    vue重写了数组中的一系列改变数组内部数据的方法（先调用原声，更新界面） 数组内部改变界面自动变化
    -->

    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el:'#demo',
            data:{
                persons:[
                    {name:'tom', age:18},
                    {name:'lily', age:12},
                    {name:'lucy', age:13},
                    {name:'rose', age:21}
                ]
            },
            methods:{
                deleteP(index){
                    //删除persons中指定的index的P
                    this.persons.splice(index,1)
                },
                updateP(index,newP){
                    //并没有改变persons本身，数组内部发生了变化，但是并没有调用变异方法，vue不会更新界面
                    // this.persons[index] = newP  
                    this.persons.splice(index,1,newP)
                    // this.persons=[]
                }
            }
        })
    </script>
</body>
</html>